<template>
  <div class="Comments_col">
    <div class="cent">
       <p class="img"><img src="../assets/Hospital stn_4.png" alt=""></p>
       <div class="cen">
         <div class="title">意见栏</div>
         <p class="name">
           <label>患者姓名：</label>
           <input type="text" v-model="details.name" class="user">
          </p>
         <p>
           <label>联系电话：</label>
           <input type="text" v-model="details.phone">
         </p>
         <p>
           <label>反馈内容：</label>
           <textarea rows="10" cols="41" v-model="details.content"></textarea>
         </p>
         <p>
           <label>上传图片：</label>
           <textarea rows="10" cols="41" v-model="details.file"></textarea>
         </p>
         <p><button @click="add()">提交留言</button></p>
       </div>
       <p class="img"><img src="../assets/Hospital stn_4.png" alt=""></p>
    </div>
  </div>
</template>
<script>
// import Search from '@/components/Search.vue'

import axios from 'axios'
export default {
  components:{
  //  Search,

  },
  data:function(){
    return{
      details:{
        name:'',
        phone:"",
        file:'',
        content:''
      }
        
      
     
    }
  },
  mounted:function(){
  
  },
  methods:{
    add:function(){
      //  console.log(this.name)
      //   console.log(this.phone)
      //   console.log(this.content)
    // var user=document.getElementsByName("user")
    // let that = this;
      // axios.get("/yijian/yijian",{
      //   name:that.name,
      //   phone:that.phone,
      //   // content:that.content
      // },function(){
			// 			if(status=="success"){
      //          alert("提交成功！")
      //       //    if(user.value.length<1){
      //       //    alert("用户名不能少于1位")
      //       //  }
      //       }
            
      // 		})
      axios
      .get("/yijian/yijian",{params:{name:this.name,phone:this.phone,content:this.content}})
      .then(res=>{this.name=res.data.name;console.log(res.data.data.name)})
    }
  }
}
</script>
<style scoped>
.Comments_col{background: #FBE7D9;padding-bottom:200px;}
.sea{width:90%;text-align:right;padding-top:104px;overflow: hidden;margin: 0 auto;}
.search{float: right;}
.img{text-align:center;padding-top:146px;}
.img:last-child{text-align:center;padding-top:20px;}
.cent{width:55%;margin:0 auto;position: relative;}
.cen{border-left:1px solid #9E290B;width:86%;margin: 0 auto;text-align: center;border-right:1px solid #9E290B;box-sizing: border-box;padding-top:42px;padding-bottom:100px;}
.title{color: #fff;background:#9E290B ;padding:15px 40px;font-size: 24px;position: absolute;top:195px;left:110px;}
.cen p{color: #9E290B;font-weight: bolder;clear: both;width: 50%;margin: 0 auto;box-sizing: border-box;}
input,textarea{border: 1px solid #9E290B;background: #FBE7D9;}
input{height: 30px;width:305px;}
label,input,textarea{float: left;margin-bottom: 40px;}
.cen p:last-child{margin-right: 0px;margin-right:16%;}
button{width: 159px;height: 48px;line-height: 48px;background: brown;color: #fff;outline: none;border: none;font-size: 20px;border-radius: 29px;}
</style>